<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>登 录</title>
  <!-- 样 式 文 件 -->
  <link rel="stylesheet" href="/pear_layui/component/pear/css/pear.css"/>
  <link rel="stylesheet" href="/pear_layui/admin/css/other/login.css"/>
</head>
<!-- 代 码 结 构 -->
<body background="/pear_layui/admin/images/background2.svg" style="background-size: cover;">
<form class="layui-form" action="" method="post">
  <div class="layui-form-item">
    <img class="logo" src="/pear_layui/admin/images/logo.png"/>
    <div class="title">Summer Fruits</div>
    <div class="desc">
      Summer Fruits 后 台 管 理 系 统
    </div>
  </div>
  <div class="layui-form-item">
    <input name="username" placeholder="账 户 : " value="tom" hover class="layui-input"/>
  </div>
  <div class="layui-form-item">
    <input name="password" type="password" value="000" placeholder="密 码 : " hover class="layui-input"/>
  </div>
  <div class="layui-form-item">
    <input placeholder="验证码 : " name="imgVerify" hover class="code layui-input layui-input-inline" maxlength="4"/>
    <!-- 验 证 码 样 式 -->
    <img src="/pear_layui/admin/images/captcha.gif" class="codeImage layui-icon-loading" id="imgVerify" title="点击更换"
         style="cursor: pointer"/>
    <!--语音读取-->
    <!--<div class="codeImage">
      <div class="layui-btn layui-btn-fluid layui-btn" id="voicePrompt">
        <i class="layui-icon layui-icon-voice"></i>语音读取</div>
    </div>-->
  </div>
  <div class="layui-form-item">
    <input type="checkbox" name="rememberMe" title="记住密码" lay-skin="primary">
  </div>
  <a href="javascript:;" id="forget">忘记密码？</a>
  <div class="layui-form-item">
    <button class="pear-btn pear-btn-success login" lay-submit lay-filter="login">
      登 入
    </button>
  </div>
</form>
<!-- 语 音 播 放 -->
<audio controls="controls" src="" id="audio" style="display: none"></audio>
<!-- 资 源 引 入 -->
<script src="/pear_layui/component/layui/layui.js"></script>
<script src="/pear_layui/component/pear/pear.js"></script>
<script>
  layui.use(['form', 'element', 'jquery', 'button', 'popup', 'drawer'], function () {
    let $ = layui.jquery;
    //加载验证码
    getVerify();
    let form = layui.form;
    let element = layui.element;
    let button = layui.button;
    let popup = layui.popup;
    let drawer = layui.drawer;

    // 获 取 验 证 码
    function getVerify() {
      $('#imgVerify').attr('src', "/api/getVerify?i=" + Math.random());
    }

    $('#imgVerify').click(function () {
      getVerify();
    });

    // 语 音 提 示
    /*$('#voicePrompt').click(function () {
      let loadIndex = layer.load(1, {/!*shade:[0.3,'#333']*!/});

      $.getJSON("/api/getCaptchaVoice", function (result) {
        layer.close(loadIndex);
        let audio = $('#audio');
        audio.attr('src', 'data:audio/mp3:base64,' + result.data);
        audio.get(0).play();
      });
    });*/

    // 登 录 提 交
    form.on('submit(login)', function (data) {
      let btn = $(this);
      data = data.field;
      if (data.username.trim() == '') {
        $("[name='username']").focus();
        layer.msg('账户不能为空！');
        return false;
      }
      if (data.password.trim() == '') {
        $("[name='password']").focus();
        layer.msg('密码不能为空！');
        return false;
      }
      if (data.imgVerify.trim() == '' || data.imgVerify.trim().length < 4) {
        $("[name='imgVerify']").focus();
        $("[name='imgVerify']").val('');
        layer.msg('验证码为4位数，请重新输入！');
        return false;
      }
      let loadIndex = layer.load(1, {});
      //设置登录按钮为不可点击状态
      btn.attr('disabled', 'disabled').addClass('layui-disabled');
      $.post("/api/login", data, function (result) {
        if (result.success) {
          button.load({
            elem: '.login', time: 500,
            done: function () {
              layer.close(loadIndex);
              layer.msg('登录成功');
              btn.attr('disabled', false).removeClass('layui-disabled');
              window.location.href = "/main";
            }
          })
        } else {
          layer.close(loadIndex);
          // 更 换 验 证 码
          getVerify();
          //恢复登录按钮，防止前台重复点击
          btn.attr('disabled', false).removeClass('layui-disabled');
          $("[name='imgVerify']").val('');
          // 输 出 错 误 信 息
          layer.alert(result.message, {icon: 2})
        }
      }, 'json');
      return false;
    });

  })
</script>
</body>
</html>
